<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>专辑信息</title>
		<script src="../../js/vue.js"></script>
		<script src="../../js/element.js"></script>
		<script src="../../js/axios.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../../css/element.css" />
		<link rel="stylesheet" type="text/css" href="../../fonts/iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../../css/album/info.css"/>
	</head>
	<body>
		<div id="app">
			<table border="0px" cellspacing="0" cellpadding="0">
				<tr>
					<td class="title">专辑：</td>
					<td class="text">{{album.albumName}}</td>
				</tr>
				<tr>
					<td class="title">歌手：</td>
					<td class="text">
						<span class="singerName" @click="toSinger(singer.singerId)" v-for="singer in album.singerList">{{singer.singerName}}</span>
					</td>
				</tr>
				<tr>
					<td class="title">发行公司：</td>
					<td class="text">{{album.albumCompany}}</td>
				</tr>
				<tr>
					<td class="title">发行时间：</td>
					<td class="text">{{album.albumReleaseTime}}</td>
				</tr>
				<tr>
					<td class="title">专辑简介：</td>
					<td class="text">
						<div class="remarks" v-for="line in albumRemarks">
							<span>{{line}}</span>
						</div>
					</td>
				</tr>
			</table>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: function() {
				return {
					album:'' ,//专辑信息
					albumRemarks: '' //处理好的专辑简介
				}
			},
			mounted() { // 生命周期函数
				this.getFatherInfo()
			},
			methods:{
				// 获取父页面的一些数据
				getFatherInfo(){
					var data = window.parent.toChildData
					this.album = data
					/* 简介有些特殊，要处理一下
					例如：暖情歌王张杰 感动十年 \n 这个冬天 因为有爱 不再寒冷 \n 爱无言，不需解释，你一定懂。华语歌坛
					以 字符 '\n' 换行，对简介进行换行
					 */
					console.log(data)
					// 1、获取原始简介
					var albumRemarksStr = this.album.albumRemarks
					// 去掉结尾的 \\n
					var albumRemarks = albumRemarksStr.slice(0, albumRemarksStr.length - 2)
					console.log(albumRemarks)
					
					// 2、根据 \\n 将字符串分割成数组
					var albumRemarksList = albumRemarks.split('\\n')
					console.log(albumRemarksList)
					
					this.albumRemarks = albumRemarksList
				},
				// 跳转到 singer页面
				toSinger(id){
					window.parent.toSinger(id)
				}
			},
		})
	</script>
</html>
